<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
	<title>Validform</title>
    <meta name="keyword" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta >
<style>
	*{list-style: none;}
	.g-mnc {
	  float: left;
	  padding: 60px 0;
	  width: 750px;
	}
	.g-mnc h2 {
	  font-family: \5fae\8f6f\96c5\9ed1;
	  font-weight: 400;
	  font-size: 24px;
	  line-height: 40px;
	  color: #ff5476;
	  padding-left: 40px;
	  background: url(../img/suprise.png) no-repeat;
	  margin-left: 10px;
	}
	.g-mnc h2.reg {
	  background-position: left -44px;
	}
	.g-mnc h2.login {
	  background-position: left 0px;
	}
	.g-mnc ul {
	  border-right: 1px solid #eee;
	}
	.g-mnc li {
	  padding: 7px 0;
	  margin-top: 10px;
	}
	.g-mnc li .tt {
	  width: 120px;
	  text-align: right;
	  display: inline-block;
	  font-size: 14px;
	  color: #666;
	}
	.g-mnc li label {
	  color: #ff5476;
	}
	.g-mnc li a {
	  color: #2584c6;
	}
	.g-mnc .text_cmn {
	  -moz-border-radius: 3px 3px 3px 3px;
	  -webkit-border-radius: 3px 3px 3px 3px;
	  -o-border-radius: 3px 3px 3px 3px;
	  border-radius: 3px 3px 3px 3px;
	  width: 260px;
	  padding: 10px 5px;
	  border: 1px solid #cccccc;
	}
	.g-mnc #email {
	  width: 170px;
	}
	.g-mnc #codetxt,
	.g-mnc #emailcode {
	  width: 100px;
	}
	.g-mnc #captchaw {
	  display: none;
	}
	.g-mnc .op {
	  margin-left: 120px;
	  width: 270px;
	}
	.g-mnc .op label {
	  color: #666;
	}
	.g-mnc .kpw {
	  float: left;
	}
	.g-mnc .code-img {
	  height: 36px;
	  vertical-align: top;
	  margin: 0 5px;
	}
	.g-mnc .u-send-code {
	  border: 1px solid #cccccc;
	  -moz-border-radius: 3px 3px 3px 3px;
	  -webkit-border-radius: 3px 3px 3px 3px;
	  -o-border-radius: 3px 3px 3px 3px;
	  border-radius: 3px 3px 3px 3px;
	  height: 36px;
	  margin: 0 0 0 10px;
	  text-align: center;
	  color: #5d5d5d;
	}
	.g-mnc .code-ture {
	  background-color: #ff8b00;
	  border-color: #ff8b00;
	  color: #ffffff;
	  cursor: pointer;
	}
	.g-mnc .u-sub-btn {
	  width: 270px;
	  height: 36px;
	  background-color: #ff5476;
	  border: none;
	  font-family: \5fae\8f6f\96c5\9ed1;
	  font-weight: 400;
	  font-size: 16px;
	  color: #ffffff;
	  -moz-border-radius: 3px 3px 3px 3px;
	  -webkit-border-radius: 3px 3px 3px 3px;
	  -o-border-radius: 3px 3px 3px 3px;
	  border-radius: 3px 3px 3px 3px;
	  cursor: pointer;
	}
	.g-mnc .passwordStrength {
	  padding-left: 235px;
	  color: #cccccc;
	}
	.g-mnc .passwordStrength span {
	  width: 32px;
	  height: 14px;
	  display: inline-block;
	  background-color: #cccccc;
	  color: #ffffff;
	  line-height: 1;
	  text-align: center;
	  margin-right: 1px;
	}
	.g-mnc .passwordStrength .bgStrength {
	  background-color: #f39700;
	}
	.g-mnc .pl {
	  padding-left: 125px;
	}
	.g-sd {
	  float: left;
	  padding-top: 127px;
	}
	.g-sdc {
	  width: 220px;
	  text-align: center;
	}
	.g-sdc h2 {
	  background: url(../img/suprise.png) no-repeat;
	  padding: 80px 20px 0 20px;
	  color: #666;
	  font-size: 14px;
	  font-family: \5fae\8f6f\96c5\9ed1;
	  font-weight: 400;
	}
	.g-sdc p {
	  font-size: 14px;
	  color: #ff0000;
	}
	.g-sdc h2.reg {
	  background-position: 70px -365px;
	}
	.g-sdc h2.login {
	  background-position: 70px -250px;
	}
	.g-sdc .to_log {
	  margin-top: 20px;
	  background-color: #93a9d5;
	  color: #fff;
	  width: 95px;
	  padding: 10px 0;
	  text-align: center;
	  display: inline-block;
	}

</style>
</head>
<body>
	<div class="g-mn">
        <div class="g-mnc">
            <h2 class="reg">填写注册信息</h2>
            <form class="userReg" action="<?php echo $this->config->item('domain_reg'); ?>home/check" method="post" >
            <ul>
                <li>
                    <span class="tt"><label for="">*</label>用户名：</span>
                    <input value=""  type="text" name="username" id="username" class="text_cmn">
                   <span class="Validform_checktip">由6-50位字符，支持中文、数字及“-”组合。</span>
                </li>
                <li>
                    <span class="tt"><label for="">*</label>登录密码：</span>
                    <input class="text_cmn inputxt" type="password" plugin="passwordStrength" name="password" value="">
                    <span class="Validform_checktip">密码为6-20个字符，请使用字母加数字或下划线组合密码。</span>
                     <div class="passwordStrength">
                        安全程度：<span >弱</span ><span >中</span ><span  class="last">强</span >
                    </div>
                </li>
                <li>

                    <span class="tt"><label for="">*</label>确认密码：</span>
                    <input value=""  type="password" name="password_confirm" id="ConfirmPassword" class="text_cmn">
                     <span class="Validform_checktip">请再次输入密码。</span>
                </li>
                <li>

                    <span class="tt"><label for="">*</label>电子邮箱：</span>
                    <input value="" type="text" name="email" id="email" class="text_cmn"><input type="button" class="u-send-code" value="发送验证码" disabled='disabled'>
                     <span class="Validform_checktip" id='tips'>请输入一个有效的电子邮箱地址。 </span>
                     <input type="hidden" id="codetime" value="">
                </li>
                <li>

                    <span class="tt"><label for="">*</label>邮箱验证码：</span>
                    <input value="" type="text" name="emailcode" id="emailcode" class="text_cmn">
                     <span class="Validform_checktip">请输入验证码,不区分大小写！</span>
                </li>
                <li class="pl">
                    <input type="checkbox" value="1" name="agree"> 我已仔细阅读并同意接受<a href="<?php echo $this->config->item('domain_help'); ?>info-1.html" target="_blank">用户使用协议</a>
                   <!--  <span class="Validform_checktip">请输入验证码,不区分大小写！</span> -->
                </li>
                <li class="pl">
                    <input type="submit" class="u-sub-btn" value="立即注册">
                </li>
            </ul>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript" src="http://ceaze.com/style/jquery.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.3.2/Validform_v5.3.2_min.js"></script>
<script>
	/*
 * extends   jquery.1.10.2
 * name      注册页面验证。
 * author    jon
 * email     191777962@qq.com
 * */


$(function() {
    //验证表单
    var userReg = $(".userReg").Validform({
        tiptype: 3
    });
    //$.Tipmsg.tit = "Message Box";
    userReg.addRule([{
        ele: "input[name = 'username']",
        datatype: /^[\w\u4e00-\u9fa5]{6,50}$/,
        nullmsg: "请输入6-50位字符，支持中文数字及“_”组合。",
        errormsg: "请输入6-50位字符，支持中文数字及“_”组合。",
        ajaxurl: 'home/check_username'
    }, {
        ele: "input[name = 'password']",
        datatype: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{6,20}$/,
        nullmsg: "！密码为6-20个字符，请用英文加数字或下划线组合！",
        errormsg: "6-20位字符，仅由英文加数字或下划线组合密码!",
        sucmsg: "填写正确",
        usePlugin: {
            passwordstrength: {
                minLen: 6,
                maxLen: 20

            }
        }
    }, {
        ele: "input[name = 'password_confirm']",
        datatype: "*6-20",
        recheck: "password",
        nullmsg: "请再次输入密码！",
        errormsg: "输入的密码不一致",
        sucmsg: "填写正确"
    }, {
        ele: "input[name = 'email']",
        datatype: /\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+/,
        nullmsg: "请输入一个有效的电子邮箱地址！",
        errormsg: "邮箱格式有误，请输入正确邮箱！",
        sucmsg: "填写正确",
        ajaxurl: 'home/check_email'
    },{
        ele: "input[name = 'emailcode']",
        datatype: "*",
        nullmsg: "请输入验证码，不区分大小写！",
        sucmsg: "填写正确!",
        ajaxurl: 'home/checkcode?email=' + $('#email').val()
    },{
        ele:"input[name= 'agree']",
        datatype: "*",
        sucmsg: "通过验证！",
        nullmsg: "请同意用户使用协议！"
    }
    ]);

    //改写email时刷新code验证
    $('#email').on('change', function() {
        setCode();
    }).on('blur', function() {
        setCode();
        // 邮箱通过验证后 延迟判断是否开启发送按钮
        setTimeout(function() {
            OnCodeBtn();
        }, 1000);
    });

    //设置验证码检测条件
    function setCode() {
       userReg.addRule([{
           ele: "input[name = 'emailcode']",
           datatype: "*",
           nullmsg: "请输入验证码，不区分大小写！",
           sucmsg: "填写正确!",
           ajaxurl: 'home/checkcode?email=' + $('#email').val()
       }]);
    };

    //发送验证码按钮状态；
    function OnCodeBtn() {
        if ($("#tips").hasClass("Validform_right")) {
            $(".u-send-code").addClass("code-ture").attr("disabled", false).val('发送验证码');
        } else {
            $(".u-send-code").removeClass("code-ture").attr("disabled", true).val('发送验证码');
        }
    };

    //验证验证码是否发送成功/
    $(".u-send-code").on('click', function() {
        $(this).attr("disabled", true);
        refreshTime(60);
        $.post('home/send_code', {
                "email": $("input[name = 'email']").val()
            },
            function(data) {

                if (data.status == 'y') {
                    $(".u-send-code").parent().find(".Validform_checktip").removeClass("Validform_wrong").addClass("Validform_right").text(data.info);
                } else {
                    $(".u-send-code").parent().find(".Validform_checktip").removeClass("Validform_right").addClass("Validform_wrong").text(data.info);
                }
            }, 'json')
    })

    //防刷计时器；
    var _time = $('#codetime').val();

    //刷新计时;
    function refreshTime(time) {
        if (time > 0) {
            time--;
            $(".u-send-code").val('在' + time + '秒后再次发送').removeClass("code-ture").attr("disabled", true);
            setTimeout(function() {
                refreshTime(time);
            }, 1000);
        } else {
            OnCodeBtn();
        };
    }

    //如何计时器大于0开启防刷验证；
    if (_time > 0) {
        refreshTime(_time);
    }
    //初始判断 发送验证码按钮状态；
    OnCodeBtn();
})
</script>
</html>